// @import '~vuetify/src/styles/styles.sass';

.app-navigation-menu {
  .vertical-nav-menu-group {
    .vertical-nav-menu-link.parent {
      border-bottom-right-radius: 32px !important;
      border-top-right-radius: 32px !important;
      transition: background-color 0.5s;

      .vertical-nav-menu-ricon {
        position: absolute;
        right: 10px;
      }

      &:hover {
        background-color: #f0f2f5;
        cursor: pointer;
      }

      &.open-list {
        background: linear-gradient(98deg, #ebf0f5, #e8edf9 90%);
      }
    }

    .vertical-nav-menu-list {
      animation-name: fadeInLeft;
      animation-duration: 0.5s !important;
      -webkit-animation-duration: 0.5s !important;
      // animation-fill-mode: both !important;
      // -webkit-animation-fill-mode: both !important;
    }
  }
}

.v-theme--dark {
  .app-navigation-menu {
    .vertical-nav-menu-group {
      .vertical-nav-menu-link.parent {
        &:hover {
          background-color: #242627;
        }

        &.open-list {
          background: linear-gradient(98deg, #323436, #2f3336 90%);
        }
      }
    }
  }
}

@keyframes listshow {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate(0, -1000px); /*Safari*/
    transform: stranslate(0, -1000px); /*标准语法*/
  }
  to {
    opacity: 1;
    -webkit-transform: translate(0, 10px); /*Safari*/
    transform: stranslate(0, 10px); /*标准语法*/
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate(-1000px, 0);
    transform: stranslate(-1000px, 0);
  }

  90% {
    opacity: 0.9;
    -webkit-transform: translate(10px, 0);
    transform: stranslate(10px, 0); 
  }
  
  to {
    opacity: 1;
    -webkit-transform: translate(0px, 0);
    transform: stranslate(0px, 0);
  }
}
